<!--
 * @Author: 刘翔
 * @Date: 2025-07-31 14:08:54
 * @LastEditTime: 2025-08-27 14:56:02
 * @LastEditors: your name
 * @Description:页面组合14(总结页)
 * @FilePath: \建达文件\ts-demo\ts-demo\src\pptHome\pageList\pageType14.vue
-->
<template>
  <div class="page-type-14">
    <div class="summary-card">
      <div class="card-content">
        <div class="summary-item" v-for="(value, key, index) in desc" :key="key">
          <div class="item-label">{{ getItemLabel(key, index) }}</div>
          <span class="item-text" v-html="value"></span>
          <div>
            <br />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'pageType14',
  components: {},
  props: {
    desc: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {};
  },

  methods: {
    /**
     * 获取项目标签
     * @param {string} key 数据的键名
     * @param {number} index 索引
     * @returns {string} 格式化的标签
     */
    getItemLabel(key, index) {
      // 中文数字映射
      const chineseNumbers = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
      const number = index < chineseNumbers.length ? chineseNumbers[index] : index + 1;
      return `${number}、${key}`;
    },
    /**
     * 导出为PPT
     * @description 将总结页内容导出到PPT
     * @param {Object} pptx pptxgen实例
     * @param {Object} slide 当前幻灯片实例
     */
    exportToPPT(pptx, slide) {
      // 动态生成内容文本
      let textList = [];
      Object.entries(this.desc).forEach(([key, value], index) => {
        //标题
        textList.push({
          text: this.getItemLabel(key, index) + '\n',
          options: {
            fontSize: 14,
            bold: true,
          },
        });
        //内容
        textList.push({
          text: value.replaceAll('<br>', '\n'),
          options: {
            fontSize: 12,
          },
        });
        textList.push({
          text: value.includes('<br>') ? '\n' : '\n\n',
        });
      });
      slide.addText(textList, {
        shape: pptx.shapes.ROUNDED_RECTANGLE,
        x: 0.5,
        y: 0.8,
        w: 9,
        h: 4.5,
        valign: 'top',
        rectRadius: 0.2,
        //边框
        line: { color: '151515', width: 0.5 },
        fill: { color: 'fff2ca' },
      });
    },
  },
};
</script>

<style scoped lang="less">
.page-type-14 {
  width: 100%;
  height: 100%;
  .summary-card {
    padding: 20px;
    width: 100%;
    height: 100%;
    background: #fff2ca;
    border-radius: 24px;
    border: 1px solid #000;
    .item-label {
      font-size: 24px;
      font-weight: 600;
      color: #000;
    }
    .item-text {
      font-size: 24px;
      color: #000;
    }
  }
}
</style>
